<template>
  <div class="container">
    <div v-if="data.student_learning">
      <div class="info_3" style="text-align: center;position: relative;">
        <div class="p_absolute">
          <p class="value_bule " style="font-size: 34px;margin-bottom: 15px;">{{ data.student_learning.learning_time }}
          </p>
          <p style="top:70%">学生学习总时长</p>
        </div>

      </div>
      <div style="display: flex;text-align: center;align-items: center;">
        <div class="info_4" style="position: relative;">
          <div class="p_absolute">
            <p class="value_bule" style="margin-bottom: 10px;">{{ data.student_learning.answer_time }}</p>
            <p>
              回答问题次数</p>
          </div>
        </div>
        <div class="info_4" style="position: relative;">
          <div class="p_absolute">
            <p class="value_bule" style="margin-bottom: 10px;">{{ data.student_learning.practice_time }}</p>
            <p>学生练习时长</p>
          </div>
        </div>
        <div class="info_4" style="position: relative;">
          <div class="p_absolute">
            <p class="value_bule" style="margin-bottom: 10px;">{{ data.student_learning.discuss_time }}</p>
            <p>学生讨论时长</p>
          </div>
        </div>
      </div>
    </div>
    <div style="text-align: center;margin-top: 20px;">
      <span style="font-size: 16px;">回答问题学生名单</span>
      <div style="height: 180px;margin-top: 20px;overflow-y: auto;" v-if="data.student_learning">
        <table>
          <tr>
            <th>学生姓名</th>
            <th>回答次数</th>
            <th>回答时间</th>
          </tr>
          <tr v-for="(item, idx) in data.student_learning.answer_list" :key="item.answers + idx">
            <td>{{ item.student_name }}</td>
            <td>{{ item.answers }}</td>
            <td>{{ item.time }}</td>
          </tr>

        </table>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      answer_list: [{
        student_name: '李同学',
        answers: '2',
        time: '2024年3月18日 14:20:45'
      },
      {
        student_name: '李同学',
        answers: '2',
        time: '2024年3月18日 14:20:45'
      },
      {
        student_name: '李同学',
        answers: '2',
        time: '2024年3月18日 14:20:45'
      }, {
        student_name: '李同学',
        answers: '2',
        time: '2024年3月18日 14:20:45'
      }, {
        student_name: '李同学',
        answers: '2',
        time: '2024年3月18日 14:20:45'
      }],
      student_learning: {
        learning_time: '11min', //学生学习总时长
        answer_time: '11次', //回答问题次数
        practice_time: "11.5min",//学生练习时长
        discuss_time: "5.2min",//学生讨论时长
      }
    };
  },
  watch: {
    data(val) {
      if (val)
        this.init()
    }
  },
  methods: {
    init() {
      // 重点学情回顾 - right
      this.student_learning = this.data.student_learning
      // 回答问题学生名单
      this.answer_list = this.data.student_learning.answer_list
    }
  }
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;

  .info_3 {
    height: 134px;
    width: 100%;
    margin: 5px;
    background: url('../../../assets/images/teach_ai/kuang_137.png') center center / 100% 100% no-repeat;
  }

  .info_4 {
    height: 90px;
    width: 100%;
    margin: 5px;
    background: url('../../../assets/images/teach_ai/kuang_210.png') center center / 100% 100% no-repeat;
  }

  .value_bule {
    color: #66FFFF;
    font-size: 24px;
    line-height: 34px;
  }

  table {
    width: 100%;
    border-collapse: collapse;

    th {
      background-color: #043C64;
    }

    th,
    td {
      border: none;
      padding: 8px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 22px;
      text-align: center;
      font-style: normal;

      :hover {
        background-color: #192d50a0;
      }
    }

    tr:nth-child(odd) {
      background-color: #192D50;


    }
  }

  .p_absolute {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>